<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<%@taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Edit Supplier</title>
<script>
$().ready(function() {
	$("#editSupplierForm").validate({
		errorLabelContainer: $("#editSupplierForm div.error")
	});

	var container = $('div.container');
	// validate the form when it is submitted
	var validator = $("#editSupplierForm").validate({
		errorContainer: container,
		errorLabelContainer: $("ol", container),
		wrapper: 'li'
	});

	$(".cancel").click(function() {
		validator.resetForm();
	});
});


</script>
</head>
<body>
	<form:form method="post" modelAttribute="supplier"
		id="editSupplierForm" class="cmxform">
		<table class="table1">
			<tr>
				<td class="td1"><form:label path="tinNumber" >TIN NUMBER</form:label></td>
				<td class="td2" colspan="2"><form:input path="tinNumber" maxlength="10" required="true"/></td>
			</tr>
			<tr>
				<td class="td1"><form:label path="supplierName">SUPPLIER NAME</form:label></td>
				<td class="td2" colspan="2"><form:input path="supplierName"  maxlength= "100" required="true"/></td>
			</tr>
			<tr>
				<td class="td1"><form:label path="supplierAddress" >SUPPLIER ADDRESS</form:label></td>
				<td class="td2" colspan="2"><form:input path="supplierAddress" maxlength = "100"/></td>
			</tr>
			<tr>
				<td class="td1"><form:label path="supplierEmailId" >SUPPLIER EMAIL ID</form:label></td>
				<td class="td2" colspan="2"><form:input path="supplierEmailId" maxlength="100" type="email"/></td>
			</tr>
			<tr>
				<td class="td1"><form:label path="supplierPhoneNumber" >SUPPLIER PHONE NUMBER</form:label></td>
				<td class="td2" colspan="2"><form:input
						path="supplierPhoneNumber" maxlength="20"/></td>
			</tr>

			<tr>
				<td class="td1"><form:label path="supplierMobileNumber" >SUPPLIER MOBILE NUMBER</form:label></td>
				<td class="td2" colspan="2"><form:input
						path="supplierMobileNumber" maxlength="15"/></td>
			</tr>
			<tr>
			<td class="td1"><form:label path="month">MONTH</form:label></td>
				<td><form:select path="month" required="true">
						<form:options items="${monthMap}" />
					</form:select></td>
			</tr>
			<tr>
			<td class="td1"><form:label path="year">YEAR</form:label></td>
				<td><form:select path="year" required="true">
						<form:options items="${yearMap}" />
					</form:select></td>
			</tr>
			<tr>
				<td>&nbsp;</td>
				<td colspan="2"><input type="submit" value="SUBMIT">&nbsp;
					&nbsp;<input type="button" value="CANCEL"></td>
			</tr>
		</table>
	</form:form>
			<div class="container">
			<h4>There are serious errors in your form submission, please see below for details.</h4>
			<ol>
				<li>
					<label for="tinNumber" class="error" >Please enter Tin Number</label>
				</li>
				<li>
					<label for="supplierName" class="error">Please enter Supplier Name (between 1 and 100 characters)</label>
				</li>
				<li>
					<label for="supplierAddress" class="error">Please enter Supplier Address (at least 3 characters)</label>
				</li>
				<li>
					<label for="supplierEmailId" class="error">Please enter email id</label>
				</li>
				<li>
					<label for="supplierPhoneNumber" class="error">Please enter phone number</label>
				</li>
				
								<li>
					<label for="supplierMobileNumber" class="error">Please enter mobile number</label>
				</li>
				
								<li>
					<label for="month" class="error">Please select a month</label>
				</li>
				
								<li>
					<label for="year" class="error">Please select a year</label>
				</li>
			</ol>
		</div>
</body>
</html>